<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    名字<input type="text"><br>
    封面<input type="text"><br>
    价格<input type="text">
    <button onclick="add()">添加</button>
    <table border="1px" style="text-align: center;">
        <thead>
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>封面</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <button onclick="xiu()"></button>
    <script>
        //渲染
        function table_apply() {
            $.ajax({
                type: 'GET',
                url: "http://127.0.0.1:3000/userbook",
                dataType: 'json',
                success: (a) => {
                    $("tbody").html("")
                    a.data.Userbook.forEach(item => {
                        $("tbody").append(`
                          <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>    <img src="${item.img}" alt=""></td>
                <td>${item.price}</td>
                 <td>   <button onclick="dele(${item.id})">删除</button></td>
            </tr>
                        `)
                    });

                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        table_apply()
    </script>
    <script>
        //添加
        function add() {
            $.ajax({
                type: 'POST',
                url: "http://127.0.0.1:3000/post",
                data: {
                    name: $("input").eq(0).val(),
                    img: $("input").eq(1).val(),
                    price: $("input").eq(2).val()
                },
                dataType: "json",
                success: (a) => {
                    table_apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //删除
        function dele(id) {
            $.ajax({
                type: 'GET',
                url: "http://127.0.0.1:3000/userbook?id=" + id,
                dataType: "json",
                success: (a) => {
                    table_apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //修改
    </script>
    <script>
        //查找
    </script>
</body>

</html>